<template>
	<view class="content">
		<view class="itemBox">
			<view class="item">
				<view class="left">
					<text class="star">*</text>
					<text class="label">抬头类型：</text>
				</view>
				<view class="right">
					<image :src="baseUrl+typeImg[0]" class="selecte" v-if="typeIndex==0 || typeIndex==1" @click="changeType(2)"></image>
					<image :src="baseUrl+typeImg[1]" class="selecte" v-if="typeIndex==2" @click="changeType(0)"></image>
					<text class="type" style="margin-right: 40rpx;" @click="changeType(2)">企业单位</text>
					
					
					<image :src="baseUrl+typeImg[0]" class="selecte" v-if="typeIndex==0 || typeIndex==2" @click="changeType(1)"></image>
					<image :src="baseUrl+typeImg[1]" class="selecte" v-if="typeIndex==1" @click="changeType(0)"></image>
					<text class="type" @click="changeType(1)">个人</text>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="star">*</text>
					<text class="label">购方名称 ：</text>
				</view>
				<view class="right">
					<input type="text" v-model="name" class="input" placeholder="请输入购方名称" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="star">*</text>
					<text class="label">购方税号 ：</text>
				</view>
				<view class="right">
					<input type="text" v-model="duty_number" class="input" placeholder="请输入购方税号" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="label">公司地址</text>
				</view>
				<view class="right">
					<input type="text" v-model="company_address" class="input" placeholder="请输入公司地址" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="label">公司电话</text>
				</view>
				<view class="right">
					<input type="text" v-model="company_phone" class="input" placeholder="请输入公司电话" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="star">*</text>
					<text class="label">公司开户行 ：</text>
				</view>
				<view class="right">
					<input type="text" v-model="bank_of_deposit" class="input" placeholder="请输入开户行" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="star">*</text>
					<text class="label">开户行账号 ：</text>
				</view>
				<view class="right">
					<input type="text" v-model="account" class="input" placeholder="请输入开户账号" />
				</view>
			</view>
			<view class="item" style="flex-direction: column;align-items: baseline;">
				<view class="left">
					<text class="label">备注（该内容将会打印在发票上） ：</text>
				</view>
				<view class="right">
					<input type="text" v-model="remark" class="inputBottom" placeholder="请输入您要备注的内容" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text class="star">*</text>
					<text class="label">邮寄地址 ：</text>
				</view>
				<view class="right">
					<input type="text" v-model="address" class="input" placeholder="请输入邮寄地址" />
				</view>
			</view>
		</view>
		<view class="submit" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				type: '企业单位',
				typeImg: ['img/my/selecte.png', 'img/my/selected.png'],
				typeIndex: 0,
				typeArr: ['企业单位', '个人'],
				name: '',
				duty_number: '',
				company_address: '',
				company_phone: '',
				bank_of_deposit: '',
				account: '',
				remark: '',
				address: '',
				order_id: '',
				is_order:''
			}
		},
		onLoad(options) {
			this.order_id = options.id;
			this.is_order = options.is_order;
		},
		methods: {
			submit() {
				if (this.typeIndex == 0) {
					return this.$toast("请选择抬头类型");
				}
				if (!this.name) {
					return this.$toast("请输入购方名称");
				}
				if (this.typeIndex == 2) { //企业
					if (!this.duty_number) {
						return this.$toast("请输入购方税号");
					}
					if (!this.bank_of_deposit) {
						return this.$toast("请输入开户行");
					}
					if (!this.account) {
						return this.$toast("请输入开户账号");
					}
				}
				if (!this.address) {
					return this.$toast("请输入邮寄地址");
				}
				this.$request.post('invoiceSave', {
					type:this.typeIndex,
					name: this.name,
					duty_number: this.duty_number,
					company_address: this.company_address,
					company_phone: this.company_phone,
					bank_of_deposit: this.bank_of_deposit,
					account:this.account,
					remark:this.remark,
					address:this.address,
					order_id:this.order_id,
					is_order:this.is_order
				}).then(res => {
					if (res.data.code != 10000) {
						return this.$toast(res.data.message);
					}
					this.$navto.navto("/pages/invoice/invoice_result/invoice_result")
				})
			},
			changeType(num) {
				this.typeIndex = num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 120rpx;
		margin-bottom: 120rpx;
		margin-left: 40rpx;
	}

	.itemBox {
		background-color: #fff;
		width: 100%;
		// height: 100vh;
		margin-top: 20rpx;
		overflow-y: scroll;

		.item:last-child {
			border: none;
		}

		.item {
			width: 670rpx;
			margin-left: 40rpx;
			padding-top: 50rpx;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #121212;
			display: flex;
			align-items: center;
			justify-content: space-between;


			.input {
				font-weight: 500;
				font-size: 28rpx;
				color: #8E8E8E;
				letter-spacing: 5rpx;
				text-align: right;
			}

			.right {
				display: flex;
				align-items: center;

				.inputBottom {
					margin-top: 50rpx;
				}

				.type {
					font-weight: 500;
					font-size: 28rpx;
					color: #121212;
					letter-spacing: 5rpx;
					margin-left: 20rpx;
				}

				.selecte {
					align-items: center;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.label {
				font-weight: 700;
				font-size: 28rpx;
				color: #121212;
				letter-spacing: 5rpx;
				margin-left: 10rpx;
			}

			.star {
				color: #FF6E5D;
				font-size: 28rpx;
			}
		}
	}

	.content {
		width: 100%;
		// height: 100vh;
		background-color: #F0F0F0;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
</style>